<script setup>
import {reactive, ref} from 'vue';
import {HomeOutlined, UserOutlined, DownOutlined} from '@ant-design/icons-vue';
import axios from "axios";
import webConfig from "@/GlobalParas.js";

defineProps({
  TreeHeight: {
    type: String,
    default: "400px"
  }
})

let userDeptId = localStorage.getItem("deptId");
let selectedKeys = ref([]);
let treeData = ref([]);

let depts = [];
let deptUrl = webConfig.postUrl + '/dept/getAllDepts';

let users = [];
let userUrl = webConfig.postUrl + '/systemUser/getAllUsers';

axios.post(deptUrl).then((res) => {
  depts = res.data;//获取所有部门
  // console.log(depts);

  axios.post(userUrl).then((res) => {
    users = res.data;//获取所有用户
    // console.log(users);

    getDeptNodes(depts, users, null, userDeptId)

    // console.log(JSON.stringify(treeData.value))
    // console.log(treeData.value)
  })

})

function getDeptNodes(depts, users, currentDept, parentId) {
  // console.log(parentId)
  let subDepts;
  if (currentDept === null) {
    subDepts = depts.filter((item) => {
      return item.tableKey === parentId;
    })
  } else {
    subDepts = depts.filter((item) => {
      return item.parentDeptId === parentId;
    })
  }

  // subDepts = depts.filter((item) => {
  //   return item.parentDeptId === parentId;
  // })

  subDepts.sort((a, b) => a.sort - b.sort);//按照部门排序顺序显示
  // console.log(subDepts);


  subDepts.forEach((item) => {
    let treeNode = {};
    treeNode.title = item.deptName;
    treeNode.key = item.tableKey;
    treeNode.nodeType = "dept";
    treeNode.children = [];

    if (currentDept === null) {
      treeData.value.push(treeNode);
    } else {
      currentDept.children.push(treeNode)
    }

    // console.log(treeNode.key)
    getDeptUsersByDeptId(users, treeNode, treeNode.key);
    getDeptNodes(depts, users, treeNode, treeNode.key);
  })
}

function getDeptUsersByDeptId(users, currentDept, deptId) {
  let deptUsers = users.filter((item) => {
    return item.deptId === deptId;
  })
  // console.log(deptUsers);


  deptUsers.forEach((item) => {
    let treeNode = {};
    treeNode.title = item.realName;
    treeNode.key = "tea_"+item.tableKey;
    treeNode.nodeType = "teacher";
    currentDept.children.push(treeNode);
  })
}

let emit = defineEmits(["treeNodeClick"])

function onNodeSelect(selectedKeys, e) {
  // console.log(selectedKeys);
  // console.log(e);
  emit("treeNodeClick", e.node)
}
</script>

<template>
  <div :style="{ 'height':TreeHeight, 'overflow-y': 'auto' }">
    <a-tree
        v-model:selectedKeys="selectedKeys"
        :tree-data="treeData"
        show-icon
        default-expand-all
        @select="onNodeSelect"
    >
      <template #switcherIcon="{ switcherCls }">
        <down-outlined :class="switcherCls"/>
      </template>
      <template #icon="{ nodeType }">
        <template v-if="nodeType === 'teacher'">
          <UserOutlined/>
        </template>
        <template v-else>
          <HomeOutlined/>
        </template>
      </template>
    </a-tree>
  </div>
</template>

<style scoped>
</style>